<template>
  <div class="pf-flow-todo pf-bgwhite">
    <div style="width: 100%">
      <span>{{ doneTask?.taskName }}</span>
      <el-button
        style="float: right; margin-right: 20px"
        link
        type="primary"
        @click.stop="selectBizData(doneTask)"
        >审批数据</el-button
      >
    </div>
    <pf-form :config="formConfig" :model="doneTask"></pf-form>
    <el-dialog v-model="bizDataDialogVis" title="审批数据">
      <pf-form :model="bizFormData" :config="bizFormConfig"></pf-form>
      <template #footer>
        <el-button @click="bizDataDialogVis = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, nextTick, onMounted, Ref, ref, toRefs } from 'vue';
import { emptyForm, FormModel, ResponseCodeEnum, useData, useHttpClient } from 'pf-component';
import { camundaApi } from '@/constants/api/camunda-api';
import { useNotice } from '@/components/element-plus/notice';
import { buildApprovalHistoryForm } from '@/views/page-config/flow/todos/form-data';

export default defineComponent({
  name: 'FlowDone',
  emits: [],
  props: ['doneTask'],
  setup(props, { emit }) {
    const bizDataDialogVis = ref(false);
    const bizFormConfig: Ref<FormModel> = ref(emptyForm);
    const bizFormData: Ref = ref({});
    const formConfig: Ref<FormModel> = ref(buildApprovalHistoryForm());
    const selectBizData = (
      { taskFormKey, processDefinitionId, taskDefinitionKey, taskInsId } = {} as any
    ) => {
      bizDataDialogVis.value = true;
      useData()
        .loadForm([{ name: taskFormKey, config: bizFormConfig, info: bizFormData }])
        .then(res => {
          bizFormConfig.value.disabled = true;
          const params = {
            processDefinitionId,
            taskDefinitionId: taskDefinitionKey,
            taskInstId: taskInsId
          };
          useHttpClient()
            .general(camundaApi.processFormApi.taskFormData, params)
            .then(res => {
              if (res.code === ResponseCodeEnum.SUCCESS) {
                bizFormData.value = res.data || {};
              } else {
                useNotice().message.error(res.message);
              }
            })
            .catch(err => {
              useNotice().message.error(err);
            });
        });
    };

    onMounted(() => {});
    return {
      selectBizData,
      formConfig,
      bizDataDialogVis,
      bizFormConfig,
      bizFormData
    };
  }
});
</script>
<style scoped lang="scss">
.#{$prefix} {
  &-flow-todo {
    //margin: 10px;
    //padding: 0;
    overflow-y: auto;
    height: calc(70vh - 50px);
    &-canvas {
      height: 400px;
    }
  }
}
</style>
